<template>
  <div>
    <!-- 头部组件 -->
    <NavBar leftText="返回"></NavBar>
    <van-tabs v-model="active" @change="getImage()">
      <!-- 页签标题 -->
      <van-tab v-for="(item,index) in cateid" :title="item.title" :key="index">
        <!-- 页签内容 -->
        <ul class="img_list" v-for="(item,index) in ImageList">
          <li @click="getImageDetail(item)">
            <div class="img_content">
              <img :src="item.img_url" alt v-lazy="item.img_url" />
            </div>
            <div class="img_info">
              <p>{{item.title}}</p>
              <p>{{item.content}}</p>
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
    <!-- 底部tab栏  -->
    <TabBar></TabBar>
  </div>
</template>

<script>
import NavBar from "../components/navBar";
import TabBar from '../components/Tabbar'
export default {
  components: {
    NavBar,
    TabBar
  },
  data() {
    return {
      ImageList: [],
      // 分类id
      cateid: [],
      active: ""
    };
  },
  created() {
    this.getCateId();
  },
  mounted() {
    this.getImageList(0);
  },
  methods: {
    // 获取图片分类id
    async getCateId() {
      const { data: res } = await this.$http.get("/api/getimgcategory");
      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取图片分类数据失败，请联系管理员");
      }
      this.cateid = res.message;
      // 由于当前没有 全部 , 需要手动添加
      this.cateid.unshift({ title: "全部", id: 0 });
    },
    // 获取图片列表数据
    async getImageList(id) {
      const { data: res } = await this.$http.get("/api/getimages/" + id);
      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取图片数据失败，请联系管理员");
      }
      this.ImageList = res.message;
    },
    // 当前激活的标签改变时触发
    getImage() {
      // console.log(this.active);
      // 通过激活项 拿到cateid数组中的当前对象, 解构拿到分类id
      const { id } = this.cateid[this.active];
      // 清空之前的数组
      this.ImageList = [];
      // // 重新发送请求
      this.getImageList(id);
    },
    // 跳转到详情页
    getImageDetail(item) {
      // 编程式导航
      this.$router.push({
        path: "/photo/Info/" + item["id"],
        query: { cateid: item["category_id"] }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.img_list {
  padding: 0 10px;
  li {
    width: 100%;
    margin: 10px 0;
    border-radius: 5px;
    overflow: hidden;
    height: 300px;
    min-height: 200px;
    position: relative;
    .img_content {
      width: 100% !important;
      height: 100% !important;
      img {
        display: block;
        width: 100% !important;
        height: 100% !important;
      }
    }
    .img_info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      padding: 0 10px;
      height: 75px;
      p {
        margin: 5px 0;
        font-size: 12px;
      }
    }
  }
}
</style>